<template>
    <div>
        <el-button @click="iconBoxShow = true" class="butBox" style="width: 100px;" type="primary" v-if="!revalue">选择图标</el-button>
        <div @click="iconBoxShow = true" v-else>
            <iconfont :icon="revalue" size="30"></iconfont>
        </div>

        <!-- 选择图标 -->
        <div class="iconBox flexFS" v-if="iconBoxShow">
            <div :key="index" @click="iconFun(item)" class="icon pd-10 radius-5 border-grey" v-for="(item, index) in iconList">
                <iconfont :icon="item" size="26"></iconfont>
            </div>
            <i @click="iconBoxShow = false" class="el-icon-close closeBtn"></i>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            Type: String,
            default: '',
        },
    },
    data() {
        return {
            iconBoxShow: false,
            revalue: this.value,
            iconList: [],
        }
    },

    mounted() {
        this.getAllIcon()
    },
    model: {
      // 需要双向绑定的 props 变量名称，也就是父组件通过 v-model 与子组件双向绑定的变量
      prop: 'value',
      // 定义由 $emit 传递变量的名称
      event: 'newValue'
    },
    methods: {
        //获取所有图标
        getAllIcon(id) {
            this.$request.get('/admin-menu/get_iconfont').then((res) => {
                this.iconList = res
            })
        },

        iconFun(res) {
            this.iconBoxShow = false
            this.revalue=res
            // this.icon = res
            this.$emit('newValue', this.revalue)
        },
    },
}
</script>

<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flexFS {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    /* 不平分高度 */
}

.iconBox {
    width: 60%;
    padding: 30px;
    height: 500px;
    background-color: #fff;
    box-shadow: 0 0 10px #a3a3a3;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 999;
}

.closeBtn {
    font-size: 25px;
    color: #555;
    position: absolute;
    right: 20px;
    top: 20px;
}

.closeBtn:hover {
    color: rgb(64, 158, 255);
}
.border-grey{
  border: 1px solid #dfdede;
  margin: 4px;
  background: #adadad1a;
}
</style>